<template>
	<view class="page">
		<flowbefore :beflows="beflows" :status="status" :isBtnClick="isBtnClicks" @save="save" @submit="submit" :statusType="statusType">
			<template>
				<view class="padding-bottom-100">
					<form class="flowform">
						<view class="formlist inputtext" v-if="$formOperates.read('flowTitle',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>流程标题</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="text" v-model="travel.flowTitle" name="flowTitle" :disabled="judge('flowTitle')"/>
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('billNo',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>单号编号</label></view>
								<view class="controlvalue">
									<input type="text" v-model="travel.billNo" name="billNo" :disabled="judge('billNo')" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('applyUser',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>申请人员</label></view>
								<view class="controlvalue">
									<input type="text" v-model="travel.applyUser" name="applyUser" :disabled="judge('billNo')" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" @tap="flowUrgent" v-if="$formOperates.read('flowUrgent',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>紧急程度</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="text" v-model="travel.flowUrgent" name="flowUrgent" placeholder="选择"/>
								</view>
								<view class="advanceicon iconfont icon-xiangyou"></view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('applyDate',formOperatesData)">
							<view class="formgroup">
								<view class="labletitle"><label>申请日期</label></view>
								<view class="controlvalue">
									<input type="text" v-model="travel.applyDate" name="applyDate" :disabled="judge('applyDate')" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext margin-top-20" v-if="$formOperates.read('departmental',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>报销部门</label></view>
								<view class="controlvalue">
									<input type="text" v-model="travel.departmental" name="departmental" placeholder="输入报销部门" :disabled="judge('departmental')" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('reimbursementId',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>报销编号</label></view>
								<view class="controlvalue">
									<input type="text" v-model="travel.reimbursementId" name="reimbursementId" placeholder="输入编号" :disabled="judge('reimbursementId')" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('billsNum',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>票据数</label></view>
								<view class="controlvalue">
									<input type="number" v-model="travel.billsNum" name="billsNum" placeholder="输入票据数" :disabled="judge('billsNum')" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('travelerUser',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>出差人员</label></view>
								<view class="controlvalue">
									<input type="text" v-model="travel.travelerUser" name="travelerUser" placeholder="输入出差人" :disabled="judge('travelerUser')" />
								</view>
							</view>
						</view>
						<view class="formlist" v-if="$formOperates.read('businessMission',formOperatesData)">
							<view class="formgroup  padding-17 border-bottom-E3E3E5">
								<view class="labletitletar">
									<label>出差任务</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue  uni-textarea">
									<textarea v-model="travel.businessMission" name="businessMission" maxlength="500" :disabled="judge('businessMission')" placeholder="输入"/>
								</view>
							</view>
						</view>
						<view class="formlist inputtext" @tap="setOutDate" v-if="$formOperates.read('setOutDate',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>出发日期</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="text" v-model="travel.setOutDate" name="setOutDate" placeholder="选择"/>
								</view>
								<view class="advanceicon iconfont icon-xiangyou"></view>
							</view>
						</view>
						<view class="formlist inputtext" @tap="returnDate" v-if="$formOperates.read('returnDate',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>回归日期</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="text" v-model="travel.returnDate" name="returnDate" placeholder="选择"/>
								</view>
								<view class="advanceicon iconfont icon-xiangyou"></view>
							</view>
						</view>
						<view class="formlist" v-if="$formOperates.read('destination',formOperatesData)">
							<view class="formgroup  padding-17">
								<view class="labletitletar">
									<label>目的地</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue  uni-textarea">
									<textarea v-model="travel.destination" name="destination" maxlength="25" :disabled="judge('destination')" placeholder="输入"/>
								</view>
							</view>
						</view>
						<view class="formlist inputtext margin-top-20" v-if="$formOperates.read('vehicleMileage',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>车辆里程</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="text" v-model="travel.vehicleMileage" name="vehicleMileage" placeholder="输入车辆里程" :disabled="judge('vehicleMileage')" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('roadFee',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>过路费</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="digit" v-model="travel.roadFee" name="roadFee" placeholder="输入过路费" :disabled="judge('roadFee')"/>
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('parkingRate',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>停车费</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="digit" v-model="travel.parkingRate" name="parkingRate" placeholder="输入停车费" :disabled="judge('parkingRate')"/>
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('breakdownFee',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>故障报修费</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="digit" v-model="travel.breakdownFee" name="breakdownFee" placeholder="输入故障报修费" :disabled="judge('breakdownFee')"/>
								</view>
							</view>
						</view>
						<view class="formlist inputtext margin-top-20" v-if="$formOperates.read('planeTicket',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>机票费</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="digit" v-model="travel.planeTicket" name="planeTicket" placeholder="输入机票费" :disabled="judge('planeTicket')"/>
								</view>
							</view>
						</view>
							<view class="formlist inputtext" v-if="$formOperates.read('fare',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>车船费</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="digit" v-model="travel.fare" name="fare" placeholder="输入车船费" :disabled="judge('fare')"/>
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('getAccommodation',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>住宿费用</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="digit" v-model="travel.getAccommodation" name="getAccommodation" placeholder="输入住宿费用" :disabled="judge('getAccommodation')"/>
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('railTransit',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>轨道交通费</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="digit" v-model="travel.railTransit" name="railTransit" placeholder="输入轨道交通费" :disabled="judge('railTransit')"/>
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('mealAllowance',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>餐补费用</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="digit" v-model="travel.mealAllowance" name="mealAllowance" placeholder="输入餐补费用" :disabled="judge('mealAllowance')" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('travelAllowance',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>出差补助</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="digit" v-model="travel.travelAllowance" name="travelAllowance" placeholder="输入出差补助" :disabled="judge('travelAllowance')"/>
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('other',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>其他费用</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="digit" v-model="travel.other" name="other" placeholder="输入其他费用" :disabled="judge('other')"/>
								</view>
							</view>
						</view>
						<view class="formlist inputtext margin-top-20" v-if="$formOperates.read('total',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>总计费用</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="digit" v-model="travel.total" name="total" placeholder="输入总计费用" :disabled="judge('total')" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('reimbursementAmount',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>报销金额</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="digit" v-model="travel.reimbursementAmount" name="reimbursementAmount" placeholder="输入报销金额" :disabled="judge('reimbursementAmount')" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" v-if="$formOperates.read('loanAmount',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>借款金额</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="digit" v-model="travel.loanAmount" name="loanAmount" placeholder="输入借款金额" :disabled="judge('loanAmount')"/>
								</view>
							</view>
						</view>
						<view class="formlist inputtext margin-bottom-30" v-if="$formOperates.read('sumOfMoney',formOperatesData)">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>补找金额</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="digit" v-model="travel.sumOfMoney" name="sumOfMoney" placeholder="输入补找金额" :disabled="judge('sumOfMoney')"/>
								</view>
							</view>
						</view>
					</form>
					<view class="height-100"></view>
				</view>
			</template>
		</flowbefore>
		<w-picker :mode="mode" :pickerList="pickerList" ref="picker" :isSearchShow="isSearchShow"></w-picker>
	</view>
</template>

<script>
	import jnpf from '@/common/js/jnpf.js'
	import helper from '@/common/js/helper.js'
	import graceChecker from '@/common/js/graceChecker.js'
	import wPicker from '@/components/w-picker/w-picker.vue'
	import flowbefore from '@/components/work/flow-before.vue'
	let formRule=[
			{name:"flowTitle",checkType:"notnull",checkRule:"",errorMsg:"输入标题"},
			{name:"flowUrgent", checkType : "notnull", checkRule:"",  errorMsg:"选择紧急程度"},
			{name:"setOutDate", checkType : "notnull", checkRule:"",  errorMsg:"选择出发日期"},
			{name:"returnDate", checkType : "notnull", checkRule:"",  errorMsg:"选择回归日期"},
			{name:"businessMission", checkType : "notnull", checkRule:"",  errorMsg:"输入出差任务"},
			{name:"roadFee", checkType : "money", checkRule:"",  errorMsg:"输入合格过路费"},
			{name:"parkingRate", checkType : "money", checkRule:"",  errorMsg:"输入合格停车费"},
			{name:"breakdownFee", checkType : "money", checkRule:"",  errorMsg:"输入合格报修费"},
			{name:"planeTicket", checkType : "money", checkRule:"",  errorMsg:"输入合格机票费"},
			{name:"fare", checkType : "money", checkRule:"",  errorMsg:"输入合格车船费"},
			{name:"getAccommodation", checkType : "money", checkRule:"",  errorMsg:"输入合格住宿费"},
			{name:"railTransit", checkType : "money", checkRule:"",  errorMsg:"输入合格轨道费"},
			{name:"mealAllowance", checkType : "money", checkRule:"",  errorMsg:"输入合格餐补费"},
			{name:"travelAllowance", checkType : "money", checkRule:"",  errorMsg:"输入合格出差费"},
			{name:"other", checkType : "money", checkRule:"",  errorMsg:"输入合格其他费"},
			{name:"total", checkType : "money", checkRule:"",  errorMsg:"输入合格总计费"},
			{name:"reimbursementAmount", checkType : "money", checkRule:"",  errorMsg:"输入合格报销费"},
			{name:"loanAmount", checkType : "money", checkRule:"",  errorMsg:"输入合格借款费"},
			{name:"sumOfMoney", checkType : "money", checkRule:"",  errorMsg:"输入合格补找费"},
			{name:"vehicleMileage", checkType : "notnull", checkRule:"",  errorMsg:"输入合格里程"},
			{name:"destination", checkType : "string", checkRule:"1,25",  errorMsg:"目的地址应为1-25个字符"},
		];
	export default {
		data() {
			return {
				mode:'',//底部弹窗分类
				isSearchShow:false,
				disabled:false,//启用
				status:'',//流程状态
				beflows:{
					operstate:"",
					processId:''
				},
				travel: {
					billNo: '',
					flowUrgent: '',
					flowTitle: jnpf.userInfo().realName+'的差旅报销申请表',
					applyUser:jnpf.userInfo().realName+"/"+jnpf.userInfo().account,
					applyDate:helper.toDate(new Date, 'yyyy-MM-dd'),
					reimbursementId:'',
					billsNum:'',
					travelerUser:'',
					vehicleMileage:'',
					roadFee:'',
					parkingRate:'',
					businessMission:'',
					breakdownFee:'',
					setOutDate:'',
					returnDate:'',
					destination:'',
					planeTicket:'',
					fare:'',
					getAccommodation:'',
					railTransit:'',
					travelAllowance:'',
					mealAllowance:'',
					other:'',
					total:'',
					reimbursementAmount:'',
					loanAmount:'',
					sumOfMoney:'',
					departmental:jnpf.userInfo().departmentName
				},
				isBtnClicks:false,
				pickerList:[],
				urgentList:[{
					label: "普通",
					value:"1"
				},
				{
					label: "重要",
					value:"2"
				},
				{
					label: "紧急",
					value:"3"
				}],
				statusType:'',
				formOperatesData:[],
				F_Status: 0
			}
		},
		
		onLoad(e) {
			/* 工作区进入状态 */
			let statusType = uni.getStorageSync("type")
			this.statusType = statusType
			let F_Status = uni.getStorageSync('F_Status')
			if(F_Status == 1 || F_Status == 2){
				this.disabled = true;
			}
			/* 工作区进入状态 End*/
			let flowInfo= JSON.parse(e.flowInfo);
			this.beflows.operstate=flowInfo.operstate;
			if(flowInfo.operstate =='add'){
				this.travel.flowId=flowInfo.id;
				this.status = 0;
				uni.setStorageSync('F_Status', 0);
				this.F_Status = Number(uni.getStorageSync('F_Status'))
				this.travel.flowUrgent=helper.getSpinnerNew(this.urgentList,'1');
				helper.ajax({
					url: '/api/system/Base/BillRule/BillNumber/WF_TravelReimbursementNo',
					success: res => {
						this.travel.billNo=res.data.data;
					}
				});
				this.getOperatesData(flowInfo.id)
			}
			if(flowInfo.operstate=='info'){
				uni.setStorageSync('F_Status', F_Status);
				this.F_Status = Number(uni.getStorageSync('F_Status'))
				this.disabled=flowInfo.disabled;
				this.beflows.processId=flowInfo.id;
				this.status=flowInfo.status;
				helper.ajax({
					url: '/api/workflow/Form/TravelReimbursement/' + flowInfo.id,
					success: res => {
						let _travel=res.data.data;
						this.travel = _travel;
						this.travel.flowUrgent=helper.getSpinnerNew(this.urgentList,_travel.flowUrgent);
						this.travel.applyDate=helper.toDate(_travel.applyDate, 'yyyy-MM-dd');
						this.travel.returnDate=helper.toDate(_travel.returnDate, "yyyy-MM-dd HH:mm");
						this.travel.setOutDate=helper.toDate(_travel.setOutDate, "yyyy-MM-dd HH:mm");
					}
				});
				if(this.status == 0 || this.status == 3){
					this.getOperatesData(flowInfo.flowId)
				}else{
					this.$eventHub.$off('formOperates');
					this.$eventHub.$on('formOperates', (data) => {
						this.formOperatesData = data;
						console.log(this.formOperatesData)
						uni.setStorageSync('formOperatesData', data)
					})
				}
			}
		},
		methods: {
			getOperatesData(id){
				helper.ajax({
					url: '/api/workflow/Engine/FlowEngine/'+id,
					success: res => {
						let kk = JSON.parse(res.data.data.flowTemplateJson);
						this.formOperatesData = [];
						this.formOperatesData = kk.properties.formOperates
						uni.setStorageSync('formOperatesData',this.formOperatesData)
					}
				});
			},
			//判断表单权限可写
			judge(id) {
				return this.statusType == 'backlog' ? this.$formOperates.write(id, this.formOperatesData) : this.F_Status ==
					1 || this.F_Status == 2 ? true : this.$formOperates.write(id, this.formOperatesData)
			},
			flowUrgent(e) {
				uni.hideKeyboard();//隐藏软键盘  
				let isWrite = this.judge('flowUrgent')
				if(!isWrite){
					this.pickerList = this.urgentList;
					this.mode="selector";
					this.$refs.picker.show();
					this.$eventHub.$off('popupmodality');
					this.$eventHub.$on('popupmodality', (data) => {
						this.travel.flowUrgent = data.result;
						this.$eventHub.$off('popupmodality');
					});
				}
			},
			setOutDate(e){
				uni.hideKeyboard();//隐藏软键盘  
				let isWrite = this.judge('setOutDate')
				if(!isWrite){
					this.mode="dateTime";
					this.$refs.picker.show();
					this.$eventHub.$off('popupmodality');
					this.$eventHub.$on('popupmodality', (data) => {
						this.travel.setOutDate = data.result;
						this.$eventHub.$off('popupmodality');
					});
				}
			},
			returnDate(e){
				uni.hideKeyboard();//隐藏软键盘  
				let isWrite = this.judge('returnDate')
				if(!isWrite){
					this.mode="dateTime";
					this.$refs.picker.show();
					this.$eventHub.$off('popupmodality');
					this.$eventHub.$on('popupmodality', (data) => {
						this.travel.returnDate = data.result;
						this.$eventHub.$off('popupmodality');
					});
				}
			},
			submit(e){
				let formData=this.travel;
				//根据表单权限过滤必填列表
				formRule = graceChecker.filterRequiredList(formRule,this.formOperatesData)
				if (!graceChecker.check(formData,formRule)) {
					helper.msg(graceChecker.error);
					return;
				}
				this.isBtnClicks=true;
				formData.flowUrgent=helper.setSpinnerNew(this.urgentList,formData.flowUrgent);
				formData.status = 0;
				let method = "POST";
				let url = "/api/workflow/Form/TravelReimbursement";
				if(formData.id){
					method = "PUT";
					url=url+"/"+formData.id
				}
				formData.applyDate = Date.parse(formData.applyDate);
				formData.returnDate = Date.parse(formData.returnDate);
				formData.setOutDate = Date.parse(formData.setOutDate);
				helper.ajax({
					url: url,
					method:method,
					contentType: "application/json",
					data:formData,
					success: res => {
						helper.msg(res.data.msg, 'success');
						if (this.beflows.operstate=='add') {
							uni.redirectTo({
								url: '../../operate/started/started',
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						}else{
							uni.navigateBack();
						}
						this.isBtnClicks=false
					}
				});
			},
			save(e){
				let formData=this.travel;
				//根据表单权限过滤必填列表
				formRule = graceChecker.filterRequiredList(formRule,this.formOperatesData)
				if (!graceChecker.check(formData,formRule)) {
					helper.msg(graceChecker.error);
					return;
				}
				this.isBtnClicks=true;
				formData.flowUrgent=helper.setSpinnerNew(this.urgentList,formData.flowUrgent);				
				formData.status = 1;
				let method = "POST";
				let url = "/api/workflow/Form/TravelReimbursement";
				if(formData.id){
					method = "PUT";
					url=url+"/"+formData.id
				}
				formData.applyDate = Date.parse(formData.applyDate);
				formData.returnDate = Date.parse(formData.returnDate);
				formData.setOutDate = Date.parse(formData.setOutDate);
				helper.ajax({
					url: url,
					method:method,
					contentType: "application/json",
					data:formData,
					success: res => {
						helper.msg(res.data.msg, 'success');
						if (this.beflows.operstate=='add') {
							uni.redirectTo({
								url: '../../operate/started/started',
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						}else{
							uni.navigateBack();
						}
						this.isBtnClicks=false
					}
				});
			},
		},
		components: {
			wPicker,
			flowbefore,
		}
	}
</script>

<style>
	.required{
		color: red;
	}
</style>
